<template>
	<view class="content">
		<slot></slot>
		<view v-if="total>0" class="sw-con" :style="{bottom:distanceFrom+'rpx'}">
			<view class="t-dot-con">
				<view class="t-dot-active" :style="{left: 40 * current + 'rpx', background: selectedBackgroundColor}">
				</view>
				<block v-for="(dot,idx) in total" :key="idx">
					<view class="t-dot-wrap" @click="dotClick(idx)">
						<view :class="['t-dot',{'active' : idx==current}]" :style="{background:backgroundColor}"></view>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "KevySwiperDot",
		props: {
			/**
			 * 当前选中的下标
			 */
			current: {
				type: Number,
				default: 0
			},
			/**
			 * 轮播图个数
			 */
			total: {
				type: Number,
				default: 0
			},
			/**
			 * 未选中颜色
			 */
			backgroundColor: {
				type: String,
				default: "rgba(0, 0, 0, 0.3)"
			},
			/**
			 * 选中颜色
			 */
			selectedBackgroundColor: {
				type: String,
				default: "#ffffff"
			},
			/**
			 * 位置，支持bottom、top、left、right-----暂未写该逻辑，后期版本实现
			 */
			position: {
				type: String,
				default: "bottom"
			},
			/**
			 * 距离对应方向边距，例如position为bottom，就是距离底部边距，单位rpx
			 */
			distanceFrom: {
				type: [Number, String],
				default: "15"
			},
		},
		data() {
			return {

			}
		},
		methods: {
			//指示点点击事件
			dotClick(i) {
				this.$emit("click", {
					index: i
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		box-sizing: border-box;
		position: relative;

		.sw-con {
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			box-sizing: border-box;
			position: absolute;
			bottom: 0rpx;
			left: 0rpx;


			.t-dot-con {
				display: inline-block;
				box-sizing: border-box;
				position: relative;
			}

			.t-dot-wrap {
				width: 40rpx;
				height: 20rpx;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				float: left;

			}

			.t-dot {
				width: 20rpx;
				height: 20rpx;
				// background: linear-gradient(to bottom, #666666, #999999);
				// background: -webkit-linear-gradient(to bottom, #666666, #999999);
				opacity: 0.3;
				border-radius: 50%;
				transition: all 100ms ease-out;
				float: left;

				&.active {
					background: rgba(0, 0, 0, 0) !important;
				}
			}

			.t-dot-active {
				position: absolute;
				left: 0rpx;
				top: 0rpx;
				width: 40rpx;
				height: 20rpx;
				border-radius: 20rpx;
				transition: all .3s ease-in-out;
				z-index: 1;
				// background: linear-gradient(to bottom, #92ffc0, #002661);
				// background: -webkit-linear-gradient(to bottom, #92ffc0, #002661);
			}

		}


	}
</style>